<template>
  <div class="geo_leaderboards">
    <div class="gl_header">
      <div>{{ title }}</div>
      <div @click="lookRank" class="glh_right">
        查看完成榜单
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="gl_content">
      <el-table :data="data" border>
        <el-table-column label="排名" width="60" align="center">
          <template #default>
            <el-icon><Medal /></el-icon>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in config[which]" :key="index" :label="item.label" align="center">
          <template #default="scope">
            <div v-if="item.handle == 'isType'">{{ typeValue(scope.row[item.prop]) }}</div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer custom-class="base_drawer" v-model="drawer" :close-on-click-modal="false" :title="title" :with-header="true" :size="720">
      <el-table :data="rankList" border>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column v-for="(item, index) in config[which]" :key="index" :label="item.label" align="center">
          <template #default="scope">
            <div v-if="item.handle == 'isType'">{{ typeValue(scope.row[item.prop]) }}</div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>   
      </el-table>
      <template #footer>
        <div>
          <el-button @click="drawer=false">关闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ArrowRight, Medal } from "@element-plus/icons-vue";
import { ref } from "vue";
import { defineProps } from "vue";
import useRoute from "@util/router";
import api from "@api/overview";

const route = useRoute();

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  which: {
    type: Number,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  },
});

const config = {
  1: [
    {
      label: "编号",
      prop: "code",
    },
    {
      label: "名称",
      prop: "name",
    },
    {
      label: "类型",
      prop: "type",
      handle: "isType"
    },
    {
      label: "数量",
      prop: "num",
    },
  ],
  2: [
    {
      label: "商品名称",
      prop: "productName",
    },
    {
      label: "归属基地",
      prop: "shopName",
    },
    {
      label: "购买数量",
      prop: "num",
    },
  ],
  3: [
    {
      label: "旅行产品名称",
      prop: "travelName",
    },
    {
      label: "归属基地",
      prop: "shopName",
    },
    {
      label: "购买数量",
      prop: "num",
    },
  ],
  4: [
    {
      label: "酒店名称",
      prop: "hotelName",
    },
    {
      label: "归属基地",
      prop: "shopName",
    },
    {
      label: "预定数量",
      prop: "num",
    },
  ],
};

function typeValue(code) {
  // 1044001商品、1044002酒店、1044003旅行、1044004礼包、1044005活动
  switch (code) {
    case '1044001':
      return '商品'
    case '1044002':
      return '酒店'
    case '1044003':
      return '旅行'
    case '1044004':
      return '礼包'
    case '1044005':
      return '活动'
    default:
      return ''
  }
}

const rankList = ref([])
const drawer = ref(false)

function lookRank() {
  drawer.value = true
  let routeQuery = route.query();
  api.rankList({
    which: props.which,
    shopCode: routeQuery.base,
    dateType: routeQuery.date
  }, val => {
    rankList.value = val.list
  })
}
</script>

<style lang="scss">
.geo_leaderboards {
  .gl_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $background;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    div {
      display: flex;
      align-items: center;
    }
    .glh_right {
      cursor: pointer;
    }
  }
}
</style>
